<script setup>
import {computed} from "vue";
import {useRoute} from "vue-router";
import {useUserInfoStore} from "@/stores/userInfo";
const useUserInfo = useUserInfoStore();
const listAdmin = [
  {
    path:"/index",
    name:"index",
    label:"招宣组",
    icon: "HomeFilled",
  },
  // {
  //   path:"/user/list",
  //   name:"user",
  //   label:"用户管理",
  //   icon: "Promotion",
  // },
  // {
  //   path:"/group/list",
  //   name:"group",
  //   label:"招宣组",
  //   icon: "Avatar",
  // },
  {
    path:"/group/list2",
    name:"group2",
    label:"招宣成员",
    icon: "Avatar",
  },
  {
    path:"/middleschool/list",
    name:"middleschool",
    label:"中学管理",
    icon: "Avatar",
  },
  {
    path:"/square/list",
    name:"square",
    label:"活动广场",
    icon: "Avatar",
  },
  {
    path:"/approve/list",
    name:"approve",
    label:"活动审批",
    icon: "Avatar",
  },
  {
    path:"/application/list",
    name:"application",
    label:"报名审批",
    icon: "Avatar",
  },
  // {
  //   path:"/userInfo",
  //   icon: "UserFilled",
  //   label: "个人中心",
  //   children:[
  //     {
  //       path:"/user/info",
  //       name:"userinfo",
  //       label:"基本资料",
  //       icon: "user",
  //     },
  //     {
  //       path:"/user/resetPassword",
  //       name:"resetPassword",
  //       label:"重置密码",
  //       icon: "EditPen",
  //     }
  //   ]
  // },

  {
    path:"/house/list",
    name:"house",
    label:"招生能力测试",
    icon: "House",
  },
];

const listUser = [
  {
    path:"/index",
    name:"index",
    label:"首页",
    icon: "HomeFilled",
  },
  {
    path:"/group/list",
    name:"group",
    label:"招宣组",
    icon: "Avatar",
  },
  {
    path:"/userInfo",
    icon: "UserFilled",
    label: "个人中心",
    children:[
      {
        path:"/user/info",
        name:"userinfo",
        label:"基本资料",
        icon: "user",
      },
      {
        path:"/user/resetPassword",
        name:"resetPassword",
        label:"重置密码",
        icon: "EditPen",
      }
    ]
  },
];

const listUser2 = [
  {
    path:"/index",
    name:"index",
    label:"首页",
    icon: "HomeFilled",
  },
  {
    path:"/group/list",
    name:"group",
    label:"招宣组",
    icon: "Avatar",
  },
];

const noChildren = ()=>{
  if(useUserInfo.userInfo.role===0){
    return  listAdmin.filter(item=>!item.children)
  }else if(useUserInfo.userInfo.role===1){
    return listUser.filter(item =>!item.children)
  }else{
    return listUser2.filter(item=>!item.children)
  }
  // return useUserInfo.userInfo.role===1? listAdmin.filter(item=>!item.children) :listUser.filter(item =>!item.children)
}
const hasChildren = ()=>{
  if(useUserInfo.userInfo.role===0){
    return  listAdmin.filter(item=>item.children)
  }else if(useUserInfo.userInfo.role===1){
    return  listUser.filter(item =>item.children)
  }else{
    listUser2.filter(item=>item.children)
  }
  // return useUserInfo.userInfo.role===1? listAdmin.filter(item=>item.children) :listUser.filter(item =>item.children)
}
const route = useRoute();
const activeMenu = computed(() => {
  const { meta, path } = route;
  if (meta.activeMenu) {
    return meta.activeMenu;
  }
  return path;
})
</script>

<template>
  <el-aside width="200px">
    <div class="el-aside__logo"></div>
    <el-menu active-text-color="#ffd04b" background-color="rgba(10,103,106,0.1)"   text-color="#fff"
             router :default-active="activeMenu">
      <el-menu-item  :index="item.path" v-for="item in noChildren()" :key="item.path">
        <component class="icons" :is="item.icon"></component>
        <span>{{item.label}}</span>
      </el-menu-item>
      <el-sub-menu :index="item.path" v-for="item in hasChildren()" :key="item.path">
        <template #title>
          <component class="icons" :is="item.icon"></component>
          <span>{{item.label}}</span>
        </template>
        <el-menu-item :index="subItem.path" v-for="(subItem,subIndex) in item.children" :key="subIndex">
          <component class="icons" :is="subItem.icon"></component>
          <span>{{subItem.label}}</span>
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
  </el-aside>
</template>

<style scoped lang="scss">
.el-aside{
  background: linear-gradient(180.00deg, #1A9FF6 30%, #A3D2F7 70%);
  //#0B578A
      //#357cff
  &__logo {
    height: 140px;
    background: url('@/assets/logo1.PNG') no-repeat center / 180px auto;
  }

  .el-menu {
    border-right: none;
  }
  .icons{
    margin-right: 8px;
    width: 18px;
    height: 18px;
  }
}
</style>
